<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>主页</title>
    <link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/plugins/build/css/app.css" media="all">
</head>

<body>
<div class="container">
    <div class="configInfo"></div>
</div>
<script src="/plugins/layui/layui.js"></script>
<script src="/plugins/common.js"></script>
<script>
    //详情地址
    var detailUrl = SERVER_URL+"/sysConfig/detail";

    layui.use(['jquery', 'form'], function() {
        var $ = layui.jquery;
        var form = layui.form;

        //详情
        if(urlParam("id")){
            $.ajax({
                type: 'GET',
                url: detailUrl,
                data: {id: urlParam("id")},
                success: function (result) {
                    if(result.code == 20000){
                        $(".configInfo").html(formateJson(result.data.configValue));
                    }else{
                        layer.msg(result.msg, {time: 1500});
                    }
                }
            });
        }
    });

    //地址栏参数
    function urlParam(name){
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if(r!=null)	return unescape(r[2]);
        return null;
    }

    //格式化json
    function formateJson(json, options) {
        var reg = null,
            formatted = '',
            pad = 0,
            PADDING = '&nbsp;&nbsp;&nbsp;&nbsp;';
        options = options || {};
        options.newlineAfterColonIfBeforeBraceOrBracket = (options.newlineAfterColonIfBeforeBraceOrBracket === true) ? true : false;
        options.spaceAfterColon = (options.spaceAfterColon === false) ? false : true;
        if (typeof json !== 'string') {
            json = JSON.stringify(json);
        } else {
            json = JSON.parse(json);
            json = JSON.stringify(json);
        }
        reg = /([\{\}])/g;
        json = json.replace(reg, '<br>$1<br>');
        reg = /([\[\]])/g;
        json = json.replace(reg, '<br>$1<br>');
        reg = /(\,)/g;
        json = json.replace(reg, '$1<br>');
        reg = /(<br><br>)/g;
        json = json.replace(reg, '<br>');
        reg = /<br>\,/g;
        json = json.replace(reg, ',');
        if (!options.newlineAfterColonIfBeforeBraceOrBracket) {
            reg = /\:<br>\{/g;
            json = json.replace(reg, ':{');
            reg = /\:<br>\[/g;
            json = json.replace(reg, ':[');
        }
        if (options.spaceAfterColon) {
            reg = /\:/g;
            json = json.replace(reg, ':');
        }
        (json.split('<br>')).forEach(function (node, index) {
                var i = 0,
                    indent = 0,
                    padding = '';

                if (node.match(/\{$/) || node.match(/\[$/)) {
                    indent = 1;
                } else if (node.match(/\}/) || node.match(/\]/)) {
                    if (pad !== 0) {
                        pad -= 1;
                    }
                } else {
                    indent = 0;
                }

                for (i = 0; i < pad; i++) {
                    padding += PADDING;
                }

                formatted += padding + node + '<br>';
                pad += indent;
            }
        );
        console.log(formatted)
        return formatted;
    };
</script>
</body>

</html>
